<template>
	<div class="base-content" key="ColorRelator">
		<el-alert title="选择一个颜色,系统将会给出同色系的深一点和浅一点的颜色" effect="dark" close-text="我知道了" />
		<div class="main-content">
			<div style="text-align: right;">
				<el-button type="text" @click="intro">新手引导</el-button>
			</div>
			<el-form label-width="120px">
				<el-row :gutter="10">
					<el-col :span="24">
						<el-card class="box-card">
							<template #header>
								<div class="card-header">
									<span>原色预览</span>
									<el-button class="button" type="text" @click="onCopy(temp)">复制颜色</el-button>
								</div>
							</template>
							<el-form-item label="选择颜色" data-step="1" data-intro="在这里选择基础颜色">
								<el-color-picker v-model="color" @active-change="colorChange" />
							</el-form-item>
							<div class="color-test" :style="{'color':temp}" data-step="2" data-intro="字体颜色预览">字体色预览
								{{temp}}
							</div>
							<div class="bak-test" :style="{'background-color':temp}" data-step="3" data-intro="背景颜色预览">
								背景色预览
								{{temp}}
							</div>
						</el-card>
					</el-col>
					<el-col :span="12" style="margin-top: 10px;">
						<el-card class="box-card">
							<template #header>
								<div class="card-header">
									<span>浅色预览</span>
									<el-button class="button" type="text" @click="onCopy(lighter)">复制颜色</el-button>
								</div>
							</template>
							<el-form-item label="浅色浅度" data-step="4" data-intro="颜色浅度,数值越大颜色越浅">
								<el-slider v-model="amtL" :max="100" show-input @change="sliderChange('l', $event)">
								</el-slider>
							</el-form-item>
							<div class="color-test" :style="{'color':lighter}">字体色预览 {{lighter}}</div>
							<div class="bak-test" :style="{'background-color':lighter}">背景色预览 {{lighter}}</div>
						</el-card>
					</el-col>
					<el-col :span="12" style="margin-top: 10px;">
						<el-card class="box-card">
							<template #header>
								<div class="card-header">
									<span>深色预览</span>
									<el-button class="button" type="text" data-step="6" data-intro="设置完可以点此直接复制"
										@click="onCopy(darker)">复制颜色
									</el-button>
								</div>
							</template>
							<el-form-item label="深色深度" data-step="5" data-intro="颜色深度,数值越大颜色越深">
								<el-slider v-model="amtD" :max="100" show-input @change="sliderChange('d', $event)">
								</el-slider>
							</el-form-item>
							<div class="color-test" :style="{'color':darker}">字体色预览 {{darker}}</div>
							<div class="bak-test" :style="{'background-color':darker}">背景色预览 {{darker}}</div>
						</el-card>
					</el-col>
				</el-row>
			</el-form>
		</div>
	</div>
</template>

<script setup lang="ts">
	import IntroJs from 'intro.js'
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		copyText
	} from '@/utils/utils'

	let color = ref('#67C23A'),
		lighter = ref('#67C23A'),
		darker = ref('#67C23A'),
		temp = ref('#67C23A'),
		amtL = ref(40),
		amtD = ref(40)
	const colorChange = (v: string) => {
			temp.value = v
			lighter.value = lightenDarkenColor(v, amtL.value)
			darker.value = lightenDarkenColor(v, -amtD.value)
		},
		lightenDarkenColor = function(col: string, amt: number) {
			let usePound = false;

			if (col[0] == "#") {
				col = col.slice(1);
				usePound = true;
			}

			let num = parseInt(col, 16);

			let r = (num >> 16) + amt;

			if (r > 255) r = 255;
			else if (r < 0) r = 0;

			let b = ((num >> 8) & 0x00FF) + amt;

			if (b > 255) b = 255;
			else if (b < 0) b = 0;

			let g = (num & 0x0000FF) + amt;

			if (g > 255) g = 255;
			else if (g < 0) g = 0;

			let result = (usePound ? "#" : "") + String("000000" + (g | (b << 8) | (r << 16)).toString(16)).slice(-
				6)

			return result.toUpperCase()
		},
		sliderChange = (type: string, val: number) => {
			if (type == 'd') {
				darker.value = lightenDarkenColor(temp.value, -val)
			} else {
				lighter.value = lightenDarkenColor(temp.value, val)
			}
		},
		intro = () => {
			IntroJs().setOptions({
				prevLabel: "上一步",
				nextLabel: "下一步",
				skipLabel: "跳过",
				doneLabel: "结束",
				exitOnOverlayClick: false
			}).oncomplete(function() {
				//点击跳过按钮后执行的事件
			}).onexit(function() {
				//点击结束按钮后， 执行的事件
			}).start();
		},
		onCopy = (e: string) => {
			copyText(e)
		}
	onMounted(() => {})
</script>

<style>
	.main-content {
		margin-top: 1em;
		padding: 0 10px;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.color-test {
		padding: 1em;
		text-align: center;
		background-color: white;
	}

	.bak-test {
		padding: 1em;
		text-align: center;
		color: white;
	}
</style>
